<template>
  <div class="container-fluid">
      <div class="row">
        <header class="header">
          <ul class="menu-sm-xs">
            <li class="menu-item"><span class="glyphicon glyphicon-leaf icon"></span><a class="menu-text" href="javascript:;">首页</a></li>
            <li class="menu-item"><span class="glyphicon glyphicon-grain icon"></span><a class="menu-text" href="javascript:;">博客</a></li>
            <li class="menu-item"><span class="glyphicon glyphicon-apple icon"></span><a class="menu-text" href="javascript:;">随笔</a></li>
            <li class="menu-item"><span class="glyphicon glyphicon-tree-deciduous icon"></span><a class="menu-text" href="javascript:;">感悟</a></li>
            <li class="menu-item"><span class="glyphicon glyphicon-tree-conifer icon"></span><a class="menu-text" href="javascript:;">推荐</a></li>
          </ul>
        </header>
        <section class="section">
          <div class="blog-title">
            <h1>Welcome to Song YueNing`s blog</h1>
          </div>
          <div class="main-container">
            <p class="theme">本章我们将介绍前端应该了解的插件</p>
            <div class="content">
              <p class="content-title">1.excanvas.js/Chart.js/cubism.js/da.js/dc.js/dx.chartjs.js/echarts.js/flot.js</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="https://echarts.apache.org">插件链接</a></p>
              <p class="content-context">用途： 构建数据统计图表，兼容多浏览器，数据统计是前端必不可少的技能之一，现在数据可视化是前端展示数据的一种重要手段，它能很好的和用户交互，提高用户的体验</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>示例：</p>
                  <div class="example-content">
                    <my-echarts />
                  </div>
                  <p class="example-hint" @click="controlExample" data-close >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">jquery.tagcanvas.js</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="http://www.goat1000.com/tagcanvas.php">插件链接</a></p>
              <p class="content-context">构建tag云，基本用法可参考<a href="http://blog.sina.com.cn/s/blog_14c9f391a0102vsaw.html">该链接</a>
              </p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <img src="http://s7.sinaimg.cn/orignal/0065F5jAzy6TjVt5L4q96" height="100%" width="100%" alt="">
                  </div>
                  <p class="example-hint" @click="controlExample" data-close >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">vue-fullpage.js</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="https://www.npmjs.com/package/vue-fullpage.js">插件链接</a></p>
              <p class="content-context">vue全屏轮播插件</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <my-fullpage></my-fullpage>
                  </div>
                  <p class="example-hint" @click="controlExample" data-close >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">oriDomi.js</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="http://oridomi.com/">插件链接</a></p>
              <p class="content-context">DOM变形插件,仅仅实现了基础的部分功能，跟多api请访问插件链接</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <my-oridomi></my-oridomi>
                  </div>
                  <p class="example-hint" @click="controlExample" data-close >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">vue-lazyload</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="https://github.com/hilongjw/vue-lazyload#readme">插件链接</a></p>
              <p class="content-context">图片懒加载插件，方便易用</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <my-lazyload></my-lazyload>
                  </div>
                  <p class="example-hint" @click="controlExample" >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">vue-video-player</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="https://github.com/surmon-china/vue-video-player#readme">插件链接</a></p>
              <p class="content-context">简易的播放视频插件，简单易用高效</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <my-video></my-video>
                  </div>
                  <p class="example-hint" @click="controlExample" >收起示例</p>
                </div>
              </div>
            </div>
            <div class="content">
              <p class="content-title">vue-aplayer</p>
              <p class="content-info"><span class="content-date">2012-5-9</span><span class="content-author">songyuening</span><a href="https://github.com/surmon-china/vue-aplayer#readme">插件链接</a></p>
              <p class="content-context">简易的播放视频插件，简单易用高效</p>
              <div>
                <p class="example-hint" @click="controlExample" data-show >打开示例</p>
                <div class="example-box">
                  <p>效果：</p>
                  <div class="example-content">
                    <my-music></my-music>
                  </div>
                  <p class="example-hint" @click="controlExample" >收起示例</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
  </div>
</template>

<script>
import MyEcharts from './echarts/echarts.vue'
import MyFullpage from './fullpage/fullpage.vue'
import MyOridomi from './oriDomi/oriDomi.vue'
import MyLazyload from './lazyload/lazyload.vue'
import MyVideo from './video/video.vue'
import MyMusic from './music/music.vue'
export default {
  data() {
    return {
      value: ''
    }
  },
  components: {
    MyEcharts,
    MyFullpage,
    MyOridomi,
    MyLazyload,
    MyVideo,
    MyMusic
  },
  methods: {
    controlExample($event) {
      if($event.target.nextElementSibling) {
        $event.target.style.display = 'none'
        $event.target.nextElementSibling.style.display = 'block'
      }else {
        $event.target.parentNode.style.display = 'none'
        $event.target.parentNode.previousElementSibling.style.display = 'block'
      }
    }
  },
  mounted() {
    const c = document.querySelector('.container')
    const em = document.querySelector('.el-main')
    c.style.height = em.offsetHeight - 20 + 'px'
    c.style.width = em.offsetWidth - 20 + 'px'
    let t = true
    const _this = this
    window.onresize = function() {
      if(t) {
        t = false
        let asideWidth
        if(_this.$store.state.openAside) {
          asideWidth = 140
        }else {
          asideWidth = 0
        }
        console.log(c.offsetWidth, em.offsetWidth)
        setTimeout(function() {
          c.style.height = em.offsetHeight - 20 + 'px'
          c.style.width = em.offsetWidth - 20 + asideWidth + 'px'
          console.log(c.offsetWidth, em.offsetWidth)
          t = true
        }, 500)
      }
    }
  }
}
</script>

<style scoped lang="less">
.container-fluid {
  min-width: 960px;
  overflow-y: scroll;
}
.header {
  padding-top: 20px;
  padding-right: 40px;
}
.menu {
  position: relative;
  background: rgba(255,255,255,.5);
  &::after,
  &::before{
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    top: 3px;
    border-radius: 50%;
    background: radial-gradient(#a8a355 40%, #645622);
    box-shadow: 0 0 5px #666439;
  }
  &::after {
    left: 3px;
  }
  &::before {
    right: 3px;
  }
}
.menu-text:hover {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.menu-text:visited {
  color: #fff;
}
.menu-item {
  height: 40px;
  line-height: 40px;
}
.icon {
  margin-right: 10px;
  vertical-align: middle;
  color: #000000;
}
.menu-text {
  font-weight: bold;
  color: #000;
}
.section {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.5);
}
.menu-sm-xs {
  height: 80px;
  padding-left: 0;
  .menu-item {
    float: left;
    width: 20%;
    text-align: center;
    font-size: 22px;
  }
}
.el-calendar {
  background: rgba(255,255,255,.5);
  /deep/.el-button {
    padding: 1px 1px;
    background-color: transparent;
    border-color: #000000;
  }
  /deep/.el-calendar-day {
    height: 18px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    text-decoration: underline;
  }
}
.blog-title {
  padding: 15px 20px;
  border-bottom: 2px solid #000000;
  font-family: "bookman old style";
  color: #fff;
}
.theme {
  text-align: center;
  font-size: 20px;
  color: #fff;
  margin: 20px auto;
}
.content {
  margin-top: 15px;
  padding: 3px 6px;
  background: linear-gradient(to bottom, #000, transparent);
  color: #fff;
}
.content-title {
  font-size: 18px;
  margin-bottom: 0;
}
.content-info {
  color: #ccc;
  font-size: 12px;
  padding-left: 10px;
}
.content-date {
  font-style: italic;
}
.content-author {
  margin: 0 15px;
}
.content-context {
  text-indent: 2em;
  font-size: 16px;
  color: #ffffff;
}
.example-hint {
  display: block;
  padding: 10px auto;
  background-color: rgba(255,255,255,.3);
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.example-box {
  display: none;
}
.example-content {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.main-container {
  height: 540px;
  overflow-y: scroll;
}
.main-container::-webkit-scrollbar {
  width: 3px;
  background-color: #fff;
}
</style>
